<template>
  <div>

    <el-button type="primary" icon="el-icon-lx-add"  @click="dialogVisible = true">新建</el-button>

    <el-dialog
      :modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="addRole" :rules="rules" :model="addRole" label-width="100px" >
<!--        <el-form-item label="所属城市:" prop="cityId">-->
<!--          <el-select v-model="addHotel.cityId" placeholder="请选择" @change="getCitySelect">-->
<!--            <el-option-->
<!--              v-for="item in cityList"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item label="角色名:" prop="roleName">
          <el-input v-model="addRole.roleName"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="saveRole('addRole')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-table
      :data="roleList"
      border
    >
      <el-table-column
        fixed
        prop="id"
        label="编号"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
      >
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="getRoleView(scope.row)" size="small" >查看权限</el-button>
          <el-button type="danger" size="small"  @click="removeRoom(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
      title="提示"
      :visible.sync="viewDisable"
      width="30%"
      :modal="false"
      :before-close="handleClose">

<!--      <el-table-->
<!--        :data="viewRole"-->
<!--        border-->
<!--      >-->
<!--        <el-table-column-->
<!--          fixed-->
<!--          prop="id"-->
<!--          label="编号"-->
<!--        >-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          fixed-->
<!--          prop="powerName"-->
<!--          label="权限名称"-->
<!--        >-->
<!--        </el-table-column>-->
<!--      </el-table>-->

      <el-button @click="toEdit()" v-show="isView">编 辑</el-button>
      <el-button type="primary" v-show="isEdit" @click="modRole()">保 存</el-button>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'RoleManage',
    methods: {
      handleClick(row) {
        alert(row.id);
      }
    },
    data(){
      return{
        rules: {
          cityId: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'change'
            },
          ],
          roleName:[
            {
              required: true,
              message: '请填写角色名',
              trigger: 'blur'
            }
          ]

        },
        addRole:{
          id:'',
          roleName:'',


        },
        cityId:'',
        roleList:[],
        powerList:[],
        viewRole:[],
        dialogVisible:false,
        viewDisable:false,
        isView:true,
        isEdit:false,
        canEdit:true,
        total:0,
        pages:1,
        size:10,
        currentPage:1,
      }
    },
    created () {
      var _this = this;
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/role/list').then(function (res) {
        if(res.data.code==80200){
          _this.roleList = res.data.data;
          // _this.total = res.data.data.total;
          // _this.pages = res.data.data.pages;
          // _this.size = res.data.data.size;
          // _this.currentPage = res.data.data.current;
        }
      })
      // _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/citylist').then(function (res) {
      //   if(res.data.code==80200){
      //     _this.cityList = res.data.data;
      //   }
      // })
    },
    methods:{
      // toEdit(){
      //   this.isEdit = true;
      //   this.canEdit=true;
      //   this.isView=true;
      // },
      // modRole(){
      //   var vo = new URLSearchParams()
      //   vo.append('roleName', this.viewRole.roleName);
      //   var _this = this;
      //   _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/mod',vo).then(function (res) {
      //     if (res.data.code == 80200) {
      //       alert(res.data.msg);
      //       location.reload();
      //     }else{
      //       alert(res.data.msg);
      //     }
      //   })
      // },
      getRoleView(row){
        this.viewDisable = true;
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/RolePower/getPower?role_id='+row.id).then(function (res) {
          if (res.data.code == 80200) {
            _this.viewRole = res.data.data.powerList;
            console.log(_this.viewRole)
          }else{
            alert(res.data.msg);
          }
        })
      },
      searchHotel(currentPage){

      },
      saveRole(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var vo = new URLSearchParams()
            // vo.append('id', this.addHotel.id);
            // vo.append('cityId', this.addHotel.cityId);
            vo.append('roleName', this.addRole.roleName);
            var _this = this;
            _this.$http.post('http://8.135.35.123:9000/hotelsystem/role/add',vo).then(function (res) {
              if (res.data.code == 80200) {
                alert(res.data.msg);
                location.reload();
              } else {
                alert(res.data.msg);
              }
            })
          }else {

          }
        })
      },
      getCitySelect(val){
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist?cityId=' + val).then(function (res) {
          if (res.data.code == 80200) {
            _this.form.hotelList = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
      },
    }
  }
</script>

<style >

</style>
